<template>
  <div class="wrapper-contion">
<div class="wrapper">
  <div class="Logo-Title">智慧配棉</div>
  <span class="Logo-sub">模拟成纱品质，优选配棉方案，配棉、试纺<br />高效便捷</span>
</div>
<div class="wrapper-white">
  <div class="top-Title">传统配棉痛点</div>
  <div v-for="(item, index) in traditionArr" :key="index" class="wow fadeInRight"
  data-wow-duration="0.4s" :data-wow-delay="index/3+'s'">
    <div class="top-Title-white" >
      <div class="top-Title-left">
        <van-image width="100%" height="100%" fit="cover" :src="item.url" />
      </div>
      <div class="top-Title-right">
        <div class="top-Title">{{item.txt}}</div>
        <div class="top-sub">{{item.sub}}</div>
      </div>
    </div>
  </div>
</div>
<div class="sys-white">
  <div class="sys-Title">纺织数据采集系统</div>
  <div class="sys-image">
    <van-image width="100%" height="100%" fit="cover"
      src="https://oss.cloudcpc.com/ddf54d20ec1e30858890068f03438f71.png" />
  </div>
  <div class="sys-sub">
    自动配棉系统，能仿真出不同的原料在基本几种纺纱工艺下，各自出产的纱线品质。将原料（或多种原料配比）的多项指标（如原棉的颜色、长度、马克隆值等）输入并选择工序流程、机型及配置工艺参数后，系统能模拟出成纱情况，方便用户配棉、试纺。
  </div>
</div>
<div class="function-white">
  <div class="function-Title">纺织数据采集系统</div>
  <div class="function-first">
    <div class="function-view">原棉管理</div>
    <div class="function-sub">导入原棉信息，详细的原棉数据以及 棉花库存，清晰展示</div>
    <div class="function-first-image">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/44f6682673bd30ccb505d74d1bbebbdd.png" />
    </div>
    <div class="function-list">
      <div class="function-list-image">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/053c6534e2913c93ab640e6c7a2f5951.png" />
      </div>
      <div class="function-first-title">（QCC/线下）数据入库管理</div>
    </div>
    <div class="function-list">
      <div class="function-list-image">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/053c6534e2913c93ab640e6c7a2f5951.png" />
      </div>
      <div class="function-first-title">数据校验</div>
    </div>
   
    <div class="function-list">
      <div class="function-list-image">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/053c6534e2913c93ab640e6c7a2f5951.png" />
      </div>
      <div class="function-first-title">原棉库存管理</div>
    </div>
    <div class="function-list">
      <div class="function-list-image">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/053c6534e2913c93ab640e6c7a2f5951.png" />
      </div>
      <div class="function-first-title">信息预警</div>
    </div>
  </div>
  <div class="function-first">
    <div class="function-view">配棉管理</div>
    <div class="function-sub function-sub-second">根据填写的参数推荐排包，自动算出相应的配棉指标， 预测配棉结果，配棉排数、库存可用包数一手掌握， 提供原棉采购参考依据</div>
    <div class="function-first-image function-second-image">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/f1a52713af0d35df81d57b2c4f7d1469.png" />
    </div>
    <div class="function-list function-list-second">
      <div class="function-list-image">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/053c6534e2913c93ab640e6c7a2f5951.png" />
      </div>
      <div class="function-first-title">配棉查询</div>
    </div>

    <div class="function-list function-list-second">
      <div class="function-list-image">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/053c6534e2913c93ab640e6c7a2f5951.png" />
      </div>
      <div class="function-first-title">新增配棉</div>
    </div>
    <div class="function-list function-list-second">
      <div class="function-list-image">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/053c6534e2913c93ab640e6c7a2f5951.png" />
      </div>
      <div class="function-first-title">配棉报表</div>
    </div>
  </div>

  <div class="function-first function-third">
    <div class="function-view">基础管理</div>
    <div class="function-sub function-sub-third">可新增或删除系统管理人员，设置职权权限； 成纱品种以及棉花种类数据详尽</div>
    <div class="function-first-image function-third-image">
      <van-image width="100%" height="100%" fit="cover"
        src="https://oss.cloudcpc.com/12fe77b73a803033b2e2fa96e25454d9.png" />
    </div>
    <div class="function-list">
      <div class="function-list-image">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/053c6534e2913c93ab640e6c7a2f5951.png" />
      </div>
      <div class="function-first-title">人员管理</div>
    </div>
    <div class="function-list">
      <div class="function-list-image">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/053c6534e2913c93ab640e6c7a2f5951.png" />
      </div>
      <div class="function-first-title">成纱品种管理</div>
    </div>
    <div class="function-list">
      <div class="function-list-image">
        <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/053c6534e2913c93ab640e6c7a2f5951.png" />
      </div>
      <div class="function-first-title">棉花种类管理</div>
    </div>
  </div>
</div>
<div class="function-down">
  <div class="down-Title">功能模块</div>
  <div class="down-sub">系统由传统的以定性为主转向以定量为主。有效地利用HVI数据，以数据库、模型库、方法库和知识库为基本部件组成系统总体框架结构，实现了方法模型化、模型数据化、配棉智能化。</div>
  <div class="image-one image-an">
    <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/a9b5ec55ed993bd2b11536b5a9eeccdf.png" />
  </div>
  <div class="image-two image-an">
    <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/27f0d28c4790309491f3b3e45342cb75.png" />
  </div>
  <div class="image-three image-an">
    <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/d39189d946193f6cb4e8b5f876c383c7.png" />
  </div>
  <div class="image-four image-an">
    <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/e56deb2b23af38aeae628c45f89ebae0.png" />
  </div>
  <div class="image-five image-an">
    <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/45ddab71fa0e325db0869094944c58d7.png" />
  </div>
  <div class="image-six image-an">
    <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/ac92d49bc8bf39cf9879f78edf663328.png" />
  </div>
  <div class="image-seven image-an">
    <van-image width="100%" height="100%" fit="cover"
          src="https://oss.cloudcpc.com/eaeabdaa73ad3b789bff26a6ad17d6a0.png" />
  </div>
</div>
  </div>

</template>

<script>
import { WxShare } from '@/utils/share'
import { redirectUrl } from '@/utils/config'
import { WOW } from 'wowjs'
export default {
  data() {
    return {
      traditionArr:[{
      leftType:'leftType1',
      url:'https://oss.cloudcpc.com/4f27b08f012a3aaaa57e854addeb7d87.png',
      txt: '依赖人工经验',
      sub: '人工配棉很大程度上取决于人的经验及处理问题的细致程度，常有片面性、偶然性。',
    },
    {
      leftType:'leftType2',
      url:'https://oss.cloudcpc.com/7379bd1865c73af3b49c8ce53d802d8c.png',
      txt: '工作流程复杂',
      sub: '为了做好配棉工作，配棉技术人员需及时掌握生产情况，了解各种原棉的库存情况及物理性能，分析其成纱质量，全面综合加以考虑，工作十分复杂。',
    },
    {
      leftType:'leftType3',
      url:'https://oss.cloudcpc.com/9749b0982da23a63b67ae666eae6aa51.png',
      txt: '计算量大',
      sub: '计算量大(如接替棉计算每天计算两张表)，且难免疏漏。',
    },
    ],
    functionArr: [
      [{
        url:'https://oss.cloudcpc.com/97f35e5c69233da988a7729d1180ab39.png',
        txt: '物料编码管理',
        sub: '物料编码的定义、规则及管理',
      },
      {
        url:'https://oss.cloudcpc.com/9798b6f63a5c3d9c96f0649670f2fc4a.png',
        txt: '库房库位编码管理',
        sub: '库房库位编码的定义、规则及管理',
      },
      {
        url:'https://oss.cloudcpc.com/7cae2d9db08b340d959a9f759431a49c.png',
        txt: '采购计划（采购订单）管理',
        sub: '根据不同企业不同管理模式，以及企 业本身信息化程度，进行开发取舍',
      },{
        url:'https://oss.cloudcpc.com/92493d3b829d34e1a9f387969e12f022.png',
        txt: '原棉管理',
        sub: '原棉管理，采购计划、质量标准、进出库记 录，以及原棉的生产厂家、产地、批号、包 型、质量标识、色值、长度、马克隆值等',
      }],
      [{
        url:'https://oss.cloudcpc.com/856f529ed6373797bcc71d0bb0a015a3.png',
        txt: '入库管理',
        sub: '入库物料的品种、规格、数量、标准等，存放位置基本固定，物料标志（标签、条码等）清晰可辨',
      },
      {
        url:'https://oss.cloudcpc.com/b6ed784287763444bf64cc9f894fead4.png',
        txt: '出库管理',
        sub: '按照生产计划、工序需求备料，按时准点足额发料',
      },
      {
        url:'https://oss.cloudcpc.com/0693550c90ea3520b89acff6ccf7043a.png',
        txt: '物料跟踪管理',
        sub: '显示物料清单及物料状态（缺料、等待、到达、接收），并通过接收设备（PAD、RFID、读卡器、条码枪等）将物料信息及时反馈',
      },{
        url:'https://oss.cloudcpc.com/047a66ec6d8333e8a9dd4dbf7eb87414.png',
        txt: '成品入库管理',
        sub: '成品通过检验后，开票入库',
      }],
    ],
    }
  },
  mounted() {
   this.$nextTick(() => {
      let wow = new WOW({
        boxClass: 'wow', /// 动画元件css类（默认为wow）
        animateClass: 'animated', // 动画css类（默认为animated）
        offset: 0, // 到元素距离触发动画（当默认为0）
        mobile: true, // 在移动设备上触发动画（默认为true）
        live: true // 对异步加载的内容进行操作（默认为true）
      })
      // wow.start()
      wow.init()
    })
    // WxShare({
    //   title: '云上展',
    //   desc: '数字展馆一站式服务，文化、品牌、科技、展示、互动、营销多位一体，量身定制虚拟数字解决方案！',
    //   link: `${redirectUrl}${fullPath}`,
    //   imgUrl: 'https://www.2025.net/share.png'
    // })
  },

  methods: {}
}
</script>
<style lang="scss" scoped>
@import './index';
</style>

